<template>
  <div class="my_search">
  <el-row  type="flex" justify="center">
      <el-col :span="18">
        <!-- 头部搜索栏 -->
       <div class="my_search_header">
            <div>
              <el-input v-model="input" placeholder="请输入要查询的内容" type="info">    
                <i style="font-size:20px" slot="prefix" class="el-input__icon el-icon-cold-drink"></i>
              <template slot="append">搜索</template>
              </el-input>
            </div> 
           
       </div>
        <!-- 身体搜索 -->
          <div class="my_search_body">
                <div><span>美食也是一种想恋!</span><div style="font-size:20px;color:#F46C6C;">已展览:到跟{{id}}想关的10条内容！！！</div></div> 
                <el-divider ></el-divider>
                <div class="my_search_import" v-for="(item,i) in res" :key="i">
                    <div>
                       <img :src="item.pic" width="150px" height="150px">
                     </div>
                      <div>
                          <span style="font-size:20px; color:#222;margin-top:8px;">{{item.tag}}</span>
                          <span style="font-size:14px; color:#777;margin:15px 0;">制作需要时间:{{item.cookingtime}}</span>
                          <span v-html="item.content"></span>
                      </div>
                </div>
        <!-- 脚步 -->
          <el-divider ></el-divider>
          <el-button-group style="margin-left:300px; margin:30px 350px; margin-right:0;">
              <el-button type="primary" icon="el-icon-arrow-left" @click="last()" :disabled="numb<=10">上一页</el-button>
              <el-button type="primary" @click="next()" :disabled="this.res.length<10">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
            </el-button-group>
          </div>


      </el-col>
  </el-row>
  </div>
</template>

<script>
export default {
   data(){
     return {
       id:'',
       input:'',
       res:[],
       numb:10
     }
   },
   methods:{
       last(){
          this.numb-=10;
          this.axios();
       },
        next(){
          this.numb+=10;
          this.axios();
        },
        axios(){
          this.input=this.id=this.$route.query.id;
          this.$axios.get(`/search?keyword=${this.id}&num=${this.numb}&appkey=1121b1761b010916`).then(res=>{
                  this.res=res.data.result.list
                  console.log(this.res);
          })
        }

   },
   mounted(){
      this.axios();
   }
}
</script>

<style >
     .my_search{  
        min-width: 1200px;
         background-color: #f7f7f7;
         margin-top: 40px;    
     }
     .my_search_header{
       width: 500px;
       padding-top:20px;
       text-align: center;
        margin: auto;
      
     }
     .my_search_header>div:nth-child(2){
      width: 600px;
      margin: 10px auto;
     }
     .my_search_body{
       width: 800px;
       margin:30px auto;
     }
    .my_search_body>div:nth-child(1){
      font-size: 22px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .my_search_import{
      margin-top: 20px;
      border-radius: 5px;
      display: flex;
      flex-direction: row;
    }
  .my_search_import>div:nth-child(2){
    margin-left: 20px;
    display: flex;
    flex-direction:column;
  }
 .my_search_import>div:nth-child(2)>span:nth-child(3){
   margin-top: 10px;
    font-size:16px;
    color:#666;
    width:500px;
     overflow :  hidden ;   /** 隐藏超出的内容 **/
    word-break: break-all ;
    text-overflow : ellipsis;  /** 多行 **/
    display: -webkit-box;  /** 对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical;  /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp:  2 ;  /** 显示的行数 **/
  }

 


</style>